<template>
    <div class="profile-page">
        <!-- 已登录状态 -->
        <template v-if="IsLogin">
            <!-- 用户信息卡片 -->
            <div class="user-card">
                <div class="avatar">👤</div>
                <div class="user-info">
                    <h2>{{ userInfo.name }}</h2>
                    <p>就诊卡号：{{ userInfo.cardNo }}</p>
                    <p>手机号：{{ userInfo.phone }}</p>
                </div>
            </div>

            <!-- 功能菜单 -->
            <div class="menu-list">
                <div v-for="(item, index) in menuItems" :key="index" class="menu-item">
                    <div class="menu-content">
                        <span class="menu-icon">{{ item.icon }}</span>
                        <span class="menu-text">{{ item.text }}</span>
                    </div>
                    <div v-if="item.badge > 0" class="badge">{{ item.badge }}</div>
                    <span class="arrow">></span>
                </div>
            </div>

            <!-- 退出登录按钮 -->
            <button class="logout-button">
                退出登录
            </button>
        </template>
        <!-- 未登录状态 -->
        <template v-else>
            <div class="login-container">
                <!-- 顶部标题 -->
                <div class="header">
                    <h2>登录</h2>
                    <p class="subtitle">登录后可以进行预约挂号</p>
                </div>

                <!-- 登录表单 -->
                <div class="login-form">
                    <!-- 手机号输入 -->
                    <div class="input-group">
                        <div class="label-row">
                            <label>手机号</label>
                            <span class="required">*</span>
                        </div>
                        <div class="input-row">
                            <span class="prefix">+86</span>
                            <input type="tel" v-model="phoneNumber" placeholder="请输入手机号" maxlength="11" />
                        </div>
                    </div>

                    <!-- 密码输入 -->
                    <div class="input-group">
                        <div class="label-row">
                            <label>密码</label>
                            <span class="required">*</span>
                        </div>
                        <div class="input-row password-input">
                            <input :type="showPassword ? 'text' : 'password'" v-model="password" placeholder="请输入密码" />
                            <button class="toggle-password" @click="showPassword = !showPassword">
                                {{ showPassword ? '隐藏' : '显示' }}
                            </button>
                        </div>
                    </div>

                    <!-- 辅助链接 -->
                    <div class="help-links">
                        <router-link to="/ForgetPassword" class="help-link">忘记密码</router-link>
                        <!-- 快速注册 -->
                        <a class="help-link" @click="$router.push('/RegisterUser')">快速注册</a>
                    </div>

                    <!-- 登录按钮 -->
                    <button class="login-button" @click="handleLogin">
                        登录
                    </button>

                    <!-- 其他登录方式 -->
                    <div class="other-login">
                        <div class="divider">
                            <span>其他登录方式</span>
                        </div>
                        <div class="login-methods">
                            <button class="method-button">
                                <span class="icon">📱</span>
                                <span>短信登录</span>
                            </button>
                            <button class="method-button">
                                <span class="icon">💳</span>
                                <span>就诊卡登录</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const IsLogin = ref(false)
const userInfo = ref({
    name: '张大爷',
    age: 65,
    phone: '138****6789',
    cardNo: '3301********1234'
})

const menuItems = [
    { icon: '📋', text: '我的预约', badge: 2 },
    { icon: '💊', text: '我的处方', badge: 1 },
    { icon: '📊', text: '检查报告', badge: 0 },
    { icon: '📝', text: '就医记录', badge: 0 },
    { icon: '⭐', text: '我的收藏', badge: 0 },
    { icon: '⚙️', text: '设置', badge: 0 }
]

const phoneNumber = ref('')
const password = ref('')
const showPassword = ref(false)

const handleLogin = () => {
    // 登录逻辑
    console.log('登录')
}


</script>

<style scoped>
.profile-page {
    min-height: 100vh;
    padding: 20px;
    background-color: #f5f5f5;
}

.user-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar {
    font-size: 48px;
    margin-right: 20px;
}

.user-info h2 {
    font-size: 24px;
    margin-bottom: 8px;
    color: #333;
}

.user-info p {
    color: #666;
    margin: 5px 0;
    font-size: 16px;
}

.menu-list {
    background: white;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.menu-content {
    display: flex;
    align-items: center;
}

.menu-icon {
    font-size: 24px;
    margin-right: 15px;
}

.menu-text {
    font-size: 18px;
    color: #333;
}

.badge {
    background: var(--primary-color);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 14px;
    margin-right: 10px;
}

.arrow {
    color: #999;
    font-size: 20px;
}

.logout-button {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    background-color: #ff4444;
    color: white;
    border: none;
    border-radius: 8px;
    margin-top: 20px;
}


.login-container {
    padding: 20px;
}

.header {
    text-align: center;
    margin-bottom: 30px;
}

.header h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 8px;
}

.subtitle {
    color: #666;
    font-size: 16px;
}

.input-group {
    margin-bottom: 20px;
}

.label-row {
    margin-bottom: 8px;
}

.label-row label {
    font-size: 16px;
    color: #333;
}

.required {
    color: #ff4d4f;
    margin-left: 4px;
}

.input-row {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.prefix {
    padding: 12px;
    color: #666;
    background: #f5f5f5;
    border-right: 1px solid #ddd;
}

input {
    flex: 1;
    padding: 12px;
    font-size: 16px;
    border: none;
    outline: none;
}

.password-input {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #666;
    font-size: 14px;
}

.help-links {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.help-link {
    color: #666;
    font-size: 14px;
}

.login-button {
    width: 100%;
    padding: 14px;
    font-size: 18px;
    color: white;
    background: var(--primary-color);
    border: none;
    border-radius: 8px;
    margin-bottom: 30px;
}

.divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
    color: #999;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ddd;
}

.divider span {
    padding: 0 16px;
    font-size: 14px;
}

.login-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.method-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.method-button .icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.method-button span {
    color: #666;
}
</style>